<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表</title>
        <style type="text/css">
            .list-container { border: 1px solid grey ; margin: 50px ;  }
            ol { border: 1px solid red ; }
            ul { border: 1px solid blue ; }
            li { border-bottom: 1px solid deeppink ; }
            dl { border: 1px solid green ; }
            dd { border-bottom: 1px solid deeppink ; }
            dt { border-bottom: 1px solid deeppink ; }
        </style>
    </head>
    <body>

        <div class="list-container">
            <ol>
                <li>川菜</li>
                <li type="I">湘菜</li>
                <li type="A">赣菜</li>
                <li type="1">粤菜</li>
                <li type="disc">鲁菜</li>
                <li type="square">浙菜</li>
                <li type="circle">闽菜</li>
            </ol>
        </div>

        <p align="center">通过 li 元素的 type 属性可以控制 项目符号 【但是，不赞成使用】</p>

        <div class="list-container">
            <ul>
                <li type="1">川菜</li>
                <li type="1">湘菜</li>
                <li type="1">赣菜</li>
                <li type="1">粤菜</li>
            </ul>
        </div>
        
    </body>
</html>